<template>
  <div
    class="flex flex-wrap justify-start content-around"
    :style="{ width: props.width, height: props.height }"
  >
    <div
      v-for="(it, index) in datas"
      :key="index"
      :style="{ width: '148px', height: '50px' }"
      class="noMr flex items-center justify-between mb-[10px] mr-[16px]"
    >
      <SvgIcon :iconClass="it.icon" size="50px" class="mr-[10px]"></SvgIcon>
      <div
        class="flex-1 flex flex-col justify-between items-start h-[100%] py-[2px]"
      >
        <span class="text-[12px] text-white text-underline">{{
          it.title
        }}</span>
        <span class="text-[#33cdfa] text-[15px] font-bold"
          >{{ it.num }}万次</span
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, watch } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "400px",
  },
  height: {
    type: String,
    default: "30px",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
  responseData: {
    type: Object,
    default: () => ({}),
  },
});
const datas = reactive([
  {
    icon: "ruzhan_miao",
    title: "60秒入栈次数",
    num: "1000",
  },
  {
    icon: "ruzhan_shi",
    title: "24小时入栈次数",
    num: "1000",
  },
  {
    icon: "ruzhan_ri",
    title: "30日入栈次数",
    num: "1000",
  },
  {
    icon: "ruzhan_yue",
    title: "12个月入栈次数",
    num: "1000",
  },
  {
    icon: "ruzhan_leiji",
    title: "累计入栈次数",
    num: "1000",
  },
]);
watch(
  () => props.responseData,
  () => {
    if (props.responseData) {
      datas[0].num = props.responseData.stack_count_60s;
      datas[1].num = props.responseData.stack_count_24h;
      datas[2].num = props.responseData.stack_count_30d;
      datas[3].num = props.responseData.stack_count_12m;
      datas[4].num = props.responseData.stack_count_all;
    }
  },
  {
    deep: true,
  }
);
const states: any = computed({
  get: () => props.models,
} as any);
</script>

<style scoped lang="scss">
.text-underline {
  position: relative;
  overflow: hidden; /* 确保伪元素不会超出容器 */
  display: block;
  z-index: 111;
}

.text-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  display: block;
  height: 7px;
  background: rgb(4, 117, 150);
  background: linear-gradient(
    90deg,
    rgba(4, 117, 150, 1) 0%,
    rgba(111, 210, 238, 0.6110819327731092) 25%,
    rgba(254, 244, 255, 0.2976365546218487) 100%
  );
  transform: scaleX(1);
  transition: transform 0.3s;
  transform: skewX(106deg);
  z-index: -1;
}

.noMr {
  &:nth-child(2n) {
    margin-right: 0;
  }
}
</style>
